<template>
  <div class="space-pictures-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <router-link to="/spaces">我的空间</router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>{{ spaceName || '空间图片' }}</a-breadcrumb-item>
      </a-breadcrumb>

      <div class="header-actions">
        <a-button @click="router.back()">
          <template #icon><ArrowLeftOutlined /></template>
          返回
        </a-button>
        <a-button type="primary" @click="showUploadModal = true">
          <template #icon><CloudUploadOutlined /></template>
          上传图片
        </a-button>
      </div>
    </div>

    <!-- 搜索和筛选区域 -->
    <a-card :bordered="false" style="margin-bottom: 16px">
      <div class="search-section">
        <!-- 搜索表单 -->
        <a-form :model="searchParams" layout="inline" class="search-form" @finish="handleSearch">
          <a-form-item label="图片名称" name="name">
            <a-input
              v-model:value="searchParams.name"
              placeholder="请输入图片名称"
              style="width: 200px"
              allow-clear
            />
          </a-form-item>

          <a-form-item label="图片宽度" name="picWidth">
            <a-input-number
              v-model:value="searchParams.picWidth"
              placeholder="宽度"
              style="width: 120px"
              :min="1"
              allow-clear
            />
          </a-form-item>

          <a-form-item label="图片高度" name="picHeight">
            <a-input-number
              v-model:value="searchParams.picHeight"
              placeholder="高度"
              style="width: 120px"
              :min="1"
              allow-clear
            />
          </a-form-item>

          <a-form-item label="编辑时间" name="editTimeRange">
            <a-range-picker
              v-model:value="editTimeRange"
              format="YYYY-MM-DD"
              :placeholder="['开始时间', '结束时间']"
              style="width: 240px"
            />
          </a-form-item>

          <a-form-item>
            <a-space>
              <a-button type="primary" html-type="submit" :icon="h(SearchOutlined)">
                搜索
              </a-button>
              <a-button @click="handleResetSearch"> 重置 </a-button>
            </a-space>
          </a-form-item>
        </a-form>

        <!-- 筛选标签 -->
        <div class="filter-section">
          <!-- 分类筛选 -->
          <div class="filter-item">
            <span class="filter-label">分类：</span>
            <a-tag
              :color="!selectedCategory ? '#1890ff' : 'default'"
              @click="handleCategoryChange('')"
              class="filter-tag"
            >
              全部
            </a-tag>
            <a-tag
              v-for="category in categoryList"
              :key="category"
              :color="selectedCategory === category ? '#1890ff' : 'default'"
              @click="handleCategoryChange(category)"
              class="filter-tag"
            >
              {{ category }}
            </a-tag>
          </div>

          <!-- 标签筛选 -->
          <div class="filter-item">
            <span class="filter-label">标签：</span>
            <a-tag
              v-for="tag in tagList"
              :key="tag"
              :color="selectedTags.includes(tag) ? '#1890ff' : 'default'"
              @click="handleTagChange(tag)"
              class="filter-tag"
            >
              {{ tag }}
            </a-tag>
          </div>
        </div>
      </div>
    </a-card>

    <!-- 图片展示区域 -->
    <a-card :bordered="false">
      <div class="pictures-grid">
        <a-spin :spinning="loading" size="large">
          <!-- 瀑布流布局 -->
          <div ref="waterfallRef" class="waterfall-container">
            <div
              v-for="picture in pictureList"
              :key="picture.id"
              class="picture-item"
              @click="handlePictureClick(picture)"
            >
              <div class="picture-card">
                <img
                  :src="picture.thumbnailUrl || picture.url"
                  :alt="picture.name"
                  @load="layoutWaterfall"
                  @error="handleImageError"
                />
                <div class="picture-overlay">
                  <div class="picture-info">
                    <div class="picture-name">{{ picture.name }}</div>
                    <div class="picture-tags">
                      <a-tag
                        v-for="tag in picture.tags?.slice(0, 3)"
                        :key="tag"
                        size="small"
                        color="blue"
                      >
                        {{ tag }}
                      </a-tag>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 加载更多 -->
          <div class="load-more" v-if="hasMore && !loading">
            <a-button type="link" @click="loadMorePictures">加载更多</a-button>
          </div>

          <!-- 没有更多数据 -->
          <div class="no-more" v-if="!hasMore && pictureList.length > 0">
            <a-divider>没有更多图片了</a-divider>
          </div>

          <!-- 空状态 -->
          <a-empty v-if="!loading && pictureList.length === 0" description="该空间暂无图片">
            <a-button type="primary" @click="showUploadModal = true">
              <template #icon><CloudUploadOutlined /></template>
              上传第一张图片
            </a-button>
          </a-empty>
        </a-spin>
      </div>
    </a-card>

    <!-- 图片上传模态框 -->
    <a-modal v-model:open="showUploadModal" title="上传图片到空间" width="800px" :footer="null">
      <picture-batch-upload
        :default-space-id="spaceId"
        @success="handleUploadSuccess"
        @cancel="showUploadModal = false"
      />
    </a-modal>

    <!-- 图片详情模态框 -->
    <a-modal
      v-model:open="showDetailModal"
      :title="selectedPicture?.name"
      width="900px"
      :footer="null"
      centered
    >
      <div v-if="selectedPicture" class="picture-detail">
        <a-row :gutter="24">
          <a-col :span="12">
            <div class="picture-preview">
              <a-image
                :src="selectedPicture.url"
                :alt="selectedPicture.name"
                :preview="true"
                style="width: 100%; max-height: 400px; object-fit: contain"
              />
            </div>
            <div v-if="selectedPicture.introduction" class="picture-introduction">
              <h4>图片简介</h4>
              <p>{{ selectedPicture.introduction }}</p>
            </div>
          </a-col>
          <a-col :span="12">
            <div class="picture-info-section">
              <a-descriptions title="基本信息" :column="1" size="small" bordered>
                <a-descriptions-item label="图片名称">
                  <a-typography-text copyable>{{ selectedPicture.name }}</a-typography-text>
                </a-descriptions-item>
                <a-descriptions-item label="分类">
                  <a-tag v-if="selectedPicture.category" color="purple">
                    {{ selectedPicture.category }}
                  </a-tag>
                  <span v-else class="text-placeholder">暂无分类</span>
                </a-descriptions-item>
                <a-descriptions-item label="文件大小">
                  {{ formatFileSize(selectedPicture.picSize || 0) }}
                </a-descriptions-item>
                <a-descriptions-item label="图片尺寸">
                  {{ selectedPicture.picWidth }}×{{ selectedPicture.picHeight }}
                  <a-tag size="small" color="blue" style="margin-left: 8px">
                    {{ formatAspectRatio(selectedPicture.picScale) }}
                  </a-tag>
                </a-descriptions-item>
                <a-descriptions-item label="图片格式">
                  <a-tag color="green">{{
                    selectedPicture.picFormat?.toUpperCase() || 'UNKNOWN'
                  }}</a-tag>
                </a-descriptions-item>
                <a-descriptions-item label="上传时间">
                  {{ formatTime(selectedPicture.createTime) }}
                </a-descriptions-item>
                <a-descriptions-item label="编辑时间" v-if="selectedPicture.editTime">
                  {{ formatTime(selectedPicture.editTime) }}
                </a-descriptions-item>
              </a-descriptions>

              <!-- 标签展示区域 -->
              <div class="tags-section">
                <h4>图片标签</h4>
                <div class="tags-container">
                  <template v-if="getFormattedTags(selectedPicture.tags).length > 0">
                    <a-tag
                      v-for="tag in getFormattedTags(selectedPicture.tags)"
                      :key="tag"
                      color="blue"
                      class="tag-item"
                    >
                      <template #icon><TagOutlined /></template>
                      {{ tag }}
                    </a-tag>
                  </template>
                  <a-empty v-else :image="false" description="暂无标签" class="empty-tags" />
                </div>
              </div>

              <!-- 操作按钮区域 -->
              <div class="detail-actions">
                <a-space direction="vertical" :size="12" style="width: 100%">
                  <a-space>
                    <a-button type="primary" @click="handleStyleGen">
                      <template #icon><HighlightFilled /></template>
                      风格重绘
                    </a-button>
                    <a-button type="primary" @click="handleEditPicture">
                      <template #icon><EditOutlined /></template>
                      编辑图片
                    </a-button>
                    <a-button @click="handleQrShare">
                      <template #icon><QrcodeOutlined /></template>
                      二维码分享
                    </a-button>
                  </a-space>
                  <!-- 团队空间特有功能：协同编辑 -->
                  <a-space v-if="isTeamSpace" direction="vertical" :size="8" style="width: 100%">
                    <a-divider style="margin: 8px 0">团队协作</a-divider>
                    <a-button type="primary" block size="large" @click="handleCollaborativeEdit">
                      <template #icon><TeamOutlined /></template>
                      协同编辑
                    </a-button>
                  </a-space>
                </a-space>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </a-modal>

    <!-- 空间图片重绘模态框 -->
    <ImageRedraw
      v-model:visible="showRedrawModal"
      :picture-data="selectedPicture ? convertPictureVOToPicture(selectedPicture) : null"
      @refresh="handleRedrawRefresh"
    />

    <!-- 图片编辑模态框 -->
    <PictureEditModal
      v-model:visible="showEditModal"
      :picture-data="selectedPicture ? convertPictureVOToPicture(selectedPicture) : null"
      @success="handleEditSuccess"
    />

    <!-- 二维码分享模态框 -->
    <a-modal v-model:open="showQrModal" title="二维码分享" width="400px" :footer="null" centered>
      <div class="qr-share-content" v-if="selectedPicture">
        <div class="qr-preview">
          <div ref="qrCodeRef" class="qr-code-container"></div>
        </div>
        <div class="share-info">
          <h4>{{ selectedPicture.name }}</h4>
          <p class="share-url">{{ getShareUrl() }}</p>
          <a-button type="primary" @click="copyShareUrl" block> 复制分享链接 </a-button>
        </div>
      </div>
    </a-modal>

    <!-- 协同编辑模态框 -->
    <PictureCollaborativeEdit
      v-model:visible="showCollaborativeEditModal"
      :picture-data="selectedPicture"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick, computed, h } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { message } from 'ant-design-vue'
import {
  ArrowLeftOutlined,
  CloudUploadOutlined,
  SearchOutlined,
  TagOutlined,
  EditOutlined,
  QrcodeOutlined,
  HighlightFilled,
  TeamOutlined,
} from '@ant-design/icons-vue'
import { listPictureVOByPage, listPictureTagCategoryBySpaceId } from '@/api/picture'
import { getSpaceVOById } from '@/api/space'
import type { PictureVO, PictureQueryRequest, Picture } from '@/types/picture'
import type { SpaceVO } from '@/types/space'
import {
  PictureBatchUpload,
  PictureEditModal,
  ImageRedraw,
  PictureCollaborativeEdit,
} from '@/components'
import dayjs, { type Dayjs } from 'dayjs'
import QRCode from 'qrcode'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

// 路由参数
const spaceId = computed(() => route.params.spaceId as string)
const spaceName = computed(() => route.query.spaceName as string)

// 响应式数据
const loading = ref(false)
const pictureList = ref<PictureVO[]>([])
const tagList = ref<string[]>([])
const categoryList = ref<string[]>([])
const hasMore = ref(true)
const showUploadModal = ref(false)
const showDetailModal = ref(false)
const showEditModal = ref(false)
const showQrModal = ref(false)
const showRedrawModal = ref(false)
const showCollaborativeEditModal = ref(false)
const selectedPicture = ref<PictureVO | null>(null)
const waterfallRef = ref<HTMLElement>()
const qrCodeRef = ref<HTMLElement>()
const currentSpace = ref<SpaceVO | null>(null)

// 搜索和筛选参数
const searchParams = reactive<PictureQueryRequest>({
  current: 1,
  pageSize: 20,
  searchText: '',
  userId: userStore.loginUser?.id ? String(userStore.loginUser.id) : undefined,
  spaceId: spaceId.value, // 指定空间ID
})

const selectedCategory = ref('')
const selectedTags = ref<string[]>([])
const editTimeRange = ref<[Dayjs, Dayjs] | null>(null)

// 检查空间访问权限
const checkSpaceOwnership = async () => {
  try {
    if (!spaceId.value) {
      message.error('空间ID无效')
      router.push('/spaces')
      return
    }

    // 直接传递字符串ID，避免精度丢失
    const response = await getSpaceVOById(spaceId.value)
    const space = (response.data.data || response.data) as SpaceVO
    currentSpace.value = space

    console.log('空间信息:', space)
    console.log('空间类型:', space.spaceType === 0 ? '个人空间' : '团队空间')

    // 只对个人空间做前端权限检查
    // 团队空间不做前端检查，让后端接口来验证权限
    if (space.spaceType === 0) {
      // 个人空间：只有创建者可以访问
      if (space.userId !== userStore.loginUser?.id) {
        message.error('您没有权限访问此个人空间')
        router.push('/spaces')
        return
      }
      console.log('个人空间权限验证通过')
    } else {
      // 团队空间：不做前端权限检查
      // 原因：
      // 1. 用户能从"我的团队空间"页面跳转过来，说明后端已经验证了成员身份
      // 2. 后端的图片列表接口会做权限验证，如果没有权限会返回错误
      // 3. 避免多余的 API 调用，提升用户体验
      console.log('团队空间，跳过前端权限检查')
    }

    console.log('空间访问权限验证通过:', space.spaceName)
  } catch (error: unknown) {
    console.error('获取空间信息失败:', error)
    message.error('获取空间信息失败，无法访问此空间')
    router.push('/spaces')
  }
}

// 是否为团队空间
const isTeamSpace = computed(() => currentSpace.value?.spaceType === 1)

// 初始化数据
onMounted(async () => {
  // 检查用户是否已登录
  if (!userStore.isLogin) {
    message.error('请先登录后再查看空间图片')
    router.push('/user/login')
    return
  }

  // 如果用户信息不完整，尝试重新获取
  if (!userStore.loginUser?.id) {
    console.log('用户信息不完整，尝试重新获取...')
    try {
      await userStore.fetchLoginUser()
      if (!userStore.loginUser?.id) {
        message.error('获取用户信息失败，请重新登录')
        router.push('/user/login')
        return
      }
    } catch (error: unknown) {
      console.error('获取用户信息失败:', error)
      message.error('获取用户信息失败，请重新登录')
      router.push('/user/login')
      return
    }
  }

  // 检查空间所有权
  await checkSpaceOwnership()

  await loadTagsAndCategories()
  await loadPictures(true)
})

// 加载标签和分类
const loadTagsAndCategories = async () => {
  const response = await listPictureTagCategoryBySpaceId(spaceId.value as string)
  if (response.data) {
    tagList.value = response.data.tagList || []
    categoryList.value = response.data.categoryList || []
  } else {
    console.error('获取标签和分类失败')
    message.error('获取标签和分类失败')
  }
  console.log('获取标签和分类:', response)
}

// 加载图片列表
const loadPictures = async (reset = false) => {
  try {
    loading.value = true

    // 重置时清空列表并重置页码
    if (reset) {
      pictureList.value = []
      searchParams.current = 1
      hasMore.value = true
    }

    // 检查用户登录状态
    if (!userStore.isLogin || !userStore.loginUser?.id) {
      message.error('请先登录后再查看空间图片')
      router.push('/user/login')
      return
    }

    // 构建查询参数
    const queryParams: PictureQueryRequest = {
      ...searchParams,
      category: selectedCategory.value || undefined,
      tags: selectedTags.value.length > 0 ? selectedTags.value : undefined,
      userId: String(userStore.loginUser.id), // 确保传递有效的用户ID
    }

    // 处理编辑时间范围
    if (editTimeRange.value && editTimeRange.value.length === 2) {
      queryParams.startEditTime = editTimeRange.value[0].format('YYYY-MM-DD HH:mm:ss')
      queryParams.endEditTime = editTimeRange.value[1].format('YYYY-MM-DD HH:mm:ss')
    }

    const response = await listPictureVOByPage(queryParams)

    if (response.data) {
      const { records, current, total, size } = response.data

      if (reset) {
        pictureList.value = records
      } else {
        pictureList.value.push(...records)
      }

      // 判断是否还有更多数据
      hasMore.value = current * size < total

      // 如果有更多数据，准备下一页
      if (hasMore.value) {
        searchParams.current = current + 1
      }

      // 图片加载完成后重新布局瀑布流
      await nextTick()
      layoutWaterfall()
    }
  } catch (error: unknown) {
    console.error('获取图片列表失败:', error)
    message.error('获取图片列表失败')
  } finally {
    loading.value = false
  }
}

// 搜索处理
const handleSearch = () => {
  loadPictures(true)
}

// 重置搜索
const handleResetSearch = () => {
  // 重置搜索参数
  searchParams.name = ''
  searchParams.picWidth = undefined
  searchParams.picHeight = undefined
  searchParams.searchText = ''

  // 重置时间范围
  editTimeRange.value = null

  // 重置分类和标签
  selectedCategory.value = ''
  selectedTags.value = []

  // 重新加载图片
  loadPictures(true)
}

// 分类筛选
const handleCategoryChange = (category: string) => {
  selectedCategory.value = category
  loadPictures(true)
}

// 标签筛选
const handleTagChange = (tag: string) => {
  const index = selectedTags.value.indexOf(tag)
  if (index > -1) {
    selectedTags.value.splice(index, 1)
  } else {
    selectedTags.value.push(tag)
  }
  loadPictures(true)
}

// 加载更多图片
const loadMorePictures = () => {
  loadPictures(false)
}

// 点击图片
const handlePictureClick = (picture: PictureVO) => {
  selectedPicture.value = picture
  showDetailModal.value = true
}

// 图片加载错误处理
const handleImageError = (event: Event) => {
  const img = event.target as HTMLImageElement
  img.src = '/placeholder-image.png' // 可以设置一个默认图片
}

// 上传成功处理
const handleUploadSuccess = () => {
  showUploadModal.value = false
  message.success('上传成功')
  // 重新加载图片列表
  loadPictures(true)
}

// 瀑布流布局
const layoutWaterfall = () => {
  if (!waterfallRef.value) return

  const container = waterfallRef.value
  const items = container.querySelectorAll('.picture-item')
  const containerWidth = container.offsetWidth
  const columnWidth = 240
  const columnCount = Math.floor(containerWidth / columnWidth)
  const columnHeights = new Array(columnCount).fill(0)

  items.forEach((item: Element) => {
    const htmlItem = item as HTMLElement
    const minHeightIndex = columnHeights.indexOf(Math.min(...columnHeights))
    const left = minHeightIndex * columnWidth
    const top = columnHeights[minHeightIndex]

    htmlItem.style.position = 'absolute'
    htmlItem.style.left = `${left}px`
    htmlItem.style.top = `${top}px`
    htmlItem.style.width = `${columnWidth - 16}px`

    columnHeights[minHeightIndex] += htmlItem.offsetHeight + 16
  })

  container.style.height = `${Math.max(...columnHeights)}px`
}

// 格式化文件大小
const formatFileSize = (bytes: number): string => {
  if (!bytes) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i]
}

// 格式化时间
const formatTime = (timeString?: string) => {
  if (!timeString) return '-'
  return dayjs(timeString).format('YYYY-MM-DD HH:mm:ss')
}

// 格式化标签（处理可能的JSON字符串或数组）
const getFormattedTags = (tags: string | string[] | undefined): string[] => {
  if (!tags) return []

  if (Array.isArray(tags)) {
    return tags.filter((tag) => tag && tag.trim())
  }

  if (typeof tags === 'string') {
    try {
      // 尝试解析JSON字符串
      const parsed = JSON.parse(tags)
      if (Array.isArray(parsed)) {
        return parsed.filter((tag) => tag && tag.trim())
      }
      return [tags].filter((tag) => tag && tag.trim())
    } catch {
      // 如果不是JSON，按逗号分割
      return tags
        .split(',')
        .map((tag) => tag.trim())
        .filter((tag) => tag)
    }
  }

  return []
}

// 格式化宽高比
const formatAspectRatio = (scale?: number) => {
  if (!scale) return ''
  if (scale > 1) {
    return `${Math.round(scale * 10) / 10}:1`
  } else {
    return `1:${Math.round((1 / scale) * 10) / 10}`
  }
}

// 将 PictureVO 转换为 Picture
const convertPictureVOToPicture = (pictureVO: PictureVO): Picture => {
  return {
    ...pictureVO,
    tags: pictureVO.tags ? JSON.stringify(pictureVO.tags) : undefined,
  }
}

// 处理图片重绘
const handleStyleGen = () => {
  showRedrawModal.value = true
}

// 处理重绘模态框刷新事件
const handleRedrawRefresh = () => {
  // 重新加载图片列表，这样用户可以看到新保存的重绘图片
  loadPictures(true)
  message.info('图片列表已刷新')
}

// 处理编辑图片
const handleEditPicture = () => {
  showEditModal.value = true
}

// 处理编辑成功
const handleEditSuccess = () => {
  showEditModal.value = false
  message.success('图片信息更新成功')
  // 重新加载图片列表
  loadPictures(true)
  // 如果详情弹窗也打开着，需要刷新详情数据
  if (showDetailModal.value && selectedPicture.value) {
    // 重新获取当前图片数据来更新详情显示
    const updatedPicture = pictureList.value.find((p) => p.id === selectedPicture.value?.id)
    if (updatedPicture) {
      selectedPicture.value = updatedPicture
    }
  }
}

// 处理二维码分享
const handleQrShare = async () => {
  showQrModal.value = true
  await nextTick()
  await generateQRCode()
}

// 生成二维码
const generateQRCode = async () => {
  if (!qrCodeRef.value || !selectedPicture.value) return

  try {
    const shareUrl = getShareUrl()
    const qrCodeDataURL = await QRCode.toDataURL(shareUrl, {
      width: 200,
      margin: 2,
      color: {
        dark: '#000000',
        light: '#FFFFFF',
      },
    })

    qrCodeRef.value.innerHTML = `<img src="${qrCodeDataURL}" alt="QR Code" style="width: 100%; height: auto;" />`
  } catch (error) {
    console.error('生成二维码失败:', error)
    message.error('生成二维码失败')
  }
}

// 获取分享链接
const getShareUrl = () => {
  if (!selectedPicture.value) return ''
  return `${window.location.origin}/picture/${selectedPicture.value.id}`
}

// 复制分享链接
const copyShareUrl = async () => {
  try {
    const shareUrl = getShareUrl()
    await navigator.clipboard.writeText(shareUrl)
    message.success('分享链接已复制到剪贴板')
  } catch (error) {
    console.error('复制失败:', error)
    message.error('复制失败，请手动复制')
  }
}

// 处理协同编辑
const handleCollaborativeEdit = () => {
  if (!isTeamSpace.value) {
    message.warning('协同编辑仅支持团队空间')
    return
  }
  showCollaborativeEditModal.value = true
}
</script>

<style scoped>
.space-pictures-container {
  padding: 24px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.search-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.search-form {
  margin-bottom: 16px;
}

.search-form .ant-form-item {
  margin-bottom: 16px;
}

.filter-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-label {
  font-weight: 500;
  color: #666;
  white-space: nowrap;
}

.filter-tag {
  cursor: pointer;
  transition: all 0.3s;
}

.filter-tag:hover {
  transform: translateY(-1px);
}

.pictures-grid {
  min-height: 400px;
}

.waterfall-container {
  position: relative;
  width: 100%;
}

.picture-item {
  cursor: pointer;
  margin-bottom: 16px;
  transition: transform 0.3s;
}

.picture-item:hover {
  transform: translateY(-2px);
}

.picture-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s;
}

.picture-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.picture-card img {
  width: 100%;
  height: auto;
  display: block;
}

.picture-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.3s;
}

.picture-card:hover .picture-overlay {
  opacity: 1;
}

.picture-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.picture-name {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.picture-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.load-more {
  text-align: center;
  padding: 20px;
}

.no-more {
  text-align: center;
  padding: 20px;
}

.picture-detail {
  padding: 16px 0;
}

.picture-preview {
  text-align: center;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 16px;
}

.picture-info-section {
  height: 100%;
}

.tags-section {
  margin-top: 20px;
  padding: 16px;
  background: #fafafa;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
}

.tags-section h4 {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #262626;
}

.tags-container {
  min-height: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

.tag-item {
  margin: 0;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  border-radius: 4px;
  transition: all 0.3s;
}

.tag-item:hover {
  transform: scale(1.05);
}

.empty-tags {
  width: 100%;
  margin: 0;
  padding: 20px 0;
}

.empty-tags :deep(.ant-empty-description) {
  font-size: 12px;
  color: #999;
}

.text-placeholder {
  color: #999;
  font-style: italic;
}

.picture-introduction {
  margin-top: 16px;
}

.picture-introduction h4 {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
}

.picture-introduction p {
  margin: 0;
  color: #666;
  line-height: 1.6;
}

.detail-actions {
  margin-top: 24px;
  text-align: center;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.qr-share-content {
  text-align: center;
}

.qr-preview {
  margin-bottom: 20px;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 8px;
}

.qr-code-container {
  display: inline-block;
  padding: 10px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.share-info h4 {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
  color: #262626;
}

.share-url {
  margin-bottom: 16px;
  padding: 8px 12px;
  background: #f5f5f5;
  border-radius: 4px;
  font-family: monospace;
  font-size: 12px;
  color: #666;
  word-break: break-all;
}

:deep(.ant-breadcrumb) {
  font-size: 16px;
}

:deep(.ant-descriptions-title) {
  font-size: 16px;
  font-weight: 600;
}

:deep(.ant-descriptions-item-label) {
  font-weight: 600;
}

:deep(.ant-empty-description) {
  color: #999;
}
</style>
